{% extends "base.html" %}
            {% block control %}<li class="treeview active">{% endblock %}
          {% block area %}
                <li class="active"><a href="/area/"><i class="fa fa-genderless"></i>区域列表</a></li>
             {% endblock %}
      <!-- Content Wrapper. Contains page content -->
             {% block content %}

          <ol class="breadcrumb">
            <li><i class="fa fa-television"></i> 管理中心</li>
            <li class="active">区域列表</li>
          </ol>

        <!-- Main content -->
        <section class="content">

          <div class="row">
            <div class="col-xs-12">


              <div class="box">
                <div class="box-header">
                  <h3 class="box-title">区域列表</h3>
                    <div class="pull-right">
                  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                       <i class="fa fa-plus-circle"></i>新建区域
                  </button>
                        </div>
                <form class="modal fade form-horizontal" id="myModal" tabindex="-1" role="dialog"
                   aria-labelledby="myModalLabel" aria-hidden="true"  method="post">
                    {% csrf_token %}
                   <div class="modal-dialog">
                      <div class="modal-content">
                         <div class="modal-header">
                            <button type="button" class="close"
                               data-dismiss="modal" aria-hidden="true">
                                  &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                               添加区域
                            </h4>
                         </div>
                         <div class=" box-body">
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.nodegroup_name.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.nodegroup_name }}
                                  </div>
                             </div>
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.area.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.area }}
                                  </div>
                             </div>

                         </div>
                         <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                               data-dismiss="modal">关闭
                            </button>
                            <button type="submit" class="btn btn-primary">
                               添加
                            </button>
                         </div>
                      </div><!-- /.modal-content -->
                </div><!-- /.modal -->
                </form>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>区域名称</th>
                        <th>位置</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                    {% for area in area_list %}
                        <tr>
                        <td>{{ area.nodegroup_name }}</td>
                        <td>{{ area.area }}</td>
                        <td>{{ area.id }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    <tfoot>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
        </section><!-- /.content -->
    {% endblock %}

  {% block js %}
    {% load staticfiles %}
        <!-- DataTables -->
    <script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "plugins/datatables/dataTables.bootstrap.min.js" %}"></script>

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
         Both of these plugins are recommended to enhance the
         user experience. Slimscroll is required when using the
         fixed layout. -->
      <script>
      $(function () {
        $("#example1").DataTable();
      });
    </script>
  {% endblock %}
